﻿window.onload = dibujarPlanoCartesiano;
var tipoFuncion = 0;

function setTipoFuncion(valor) {
    tipoFuncion = valor;
    var seccionDatos = document.getElementById("datos");
    if (tipoFuncion == 2) {
        var contenido = "<label id='fx'>F<sub>(x)</sub> = </label>"
        contenido += "<input type='text' placeholder='Valor' min='-9999' max='9999' id='txtx2' name='x2'class='cajasDeTextos' />"
        contenido += "<label id='x2'> x<sup>2</sup> </label>"
        contenido += "<input type='text' placeholder='Valor' min='-9999' max='9999' name='x' id='txtx' class='cajasDeTextos'/>"
        contenido += "<label id='x'> x </label>"
        contenido += "<input type='text' placeholder='Valor' min='-9999' max='9999' id='txtnum' name='x1' class='cajasDeTextos'/>"
        seccionDatos.innerHTML = contenido;
    } else if(tipoFuncion ==1) {
        var contenido = "<label id='fx'>F<sub>(x)</sub> = </label>"
        contenido += "<input type='text' placeholder='Valor' min='-9999' max='9999' id='txtx' name='x2' class='cajasDeTextos' />"
        contenido += "<label id='x'> x </label>"
        contenido += "<input type='text' placeholder='Valor' min='-9999' max='9999' id='txtnum' name='x1' class='cajasDeTextos'/>"
        seccionDatos.innerHTML = contenido;
    } else {
        var contenido = "";
        seccionDatos.innerHTML = contenido;
    }
}

function dibujarPlanoCartesiano() {
    var canvas = document.getElementById("lienzo");
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 1; //Valor del ancho de linea a dibujar.
    ctx.strokeStyle = "gray"; //Cambia el color de la linea a griss.

    var x1v = 600 / 2;
    var y1v = 0;
    var x2v = 600 / 2;
    var y2v = 450;

    ctx.beginPath(); //Empieza a pintar linea vertical.
    ctx.moveTo(x1v, y1v);
    ctx.lineTo(x2v, y2v);
    ctx.closePath(); //Termina de pintar.
    ctx.stroke();

    var x1h = 0;
    var y1h = 450 / 2;
    var x2h = 600;
    var y2h = 450 / 2;

    ctx.beginPath(); //Empieza a pintar linea horizontal.
    ctx.moveTo(x1h, y1h);
    ctx.lineTo(x2h, y2h);
    ctx.closePath(); //Termina de pintar.
    ctx.stroke();

    //Dibuja las lineas de escala vertical.
    var mitadY = 450 / 2;
    var mitadX = 600 / 2;
    var decimaY = mitadY / 10;
    var inicioYp = mitadY - decimaY, inicioYn = mitadY + decimaY;
    for (var i = 0; i < 10; i++) {
        //dibuja lineas Y+
        ctx.beginPath();
        ctx.moveTo(mitadX - 5, inicioYp);
        ctx.lineTo(mitadX + 5, inicioYp);
        ctx.closePath();
        ctx.stroke();
        inicioYp -= decimaY;
        //Dibuja lineas Y-
        ctx.beginPath();
        ctx.moveTo(mitadX - 5, inicioYn);
        ctx.lineTo(mitadX + 5, inicioYn);
        ctx.closePath();
        ctx.stroke();
        inicioYn += decimaY;
    }

    //Dibuja las lineas de escala horizontal.
    var decimaX = mitadX / 10;
    var inicioXp = mitadX + decimaX, inicioXn = mitadX - decimaX;
    for (var i = 0; i < 10; i++) {
        //dibuja lineas X+
        ctx.beginPath();
        ctx.moveTo(inicioXp, mitadY - 5);
        ctx.lineTo(inicioXp, mitadY + 5);
        ctx.closePath();
        ctx.stroke();
        inicioXp += decimaX;
        //Dibuja lineas X-
        ctx.beginPath();
        ctx.moveTo(inicioXn, mitadY - 5);
        ctx.lineTo(inicioXn, mitadY + 5);
        ctx.closePath();
        ctx.stroke();
        inicioXn -= decimaX;
    }
}

function dibujarFuncion() {
    limpiaCanvas();
    var incremento = parseFloat(document.getElementById("txtIncrementos").value);
    var limiteSup = parseFloat(document.getElementById("rangoSup").value);
    var limiteInf = parseFloat(document.getElementById("rangoInf").value);
    //Valida si existen datos en los limites y el incremento.
    if (incremento > 0 && limiteSup > limiteInf) {
        //Verifica si el tipo de la funcion es lineal
        if (tipoFuncion == 1) {
            var txtx = parseFloat(document.getElementById("txtx").value);
            var num = parseFloat(document.getElementById("txtnum").value);
            var x = 0;
            var puntosX = new Array();
            var puntosY = new Array();
            for (; limiteInf <= limiteSup;) {
                x = (parseFloat(txtx) * limiteInf) + parseFloat(num);
                puntosX.push(x);
                puntosY.push(limiteInf);
                limiteInf += incremento;
               
                //if (limiteInf > limiteSup) break; //Detiene el ciclo una vez el limite inferior haya sido mayor al limite superior.
            }
            dibujaPuntos(puntosX, puntosY);
            //Verifica si el tipo de funcion es cuadratica.
        } else if (tipoFuncion == 2) {
            var a = parseFloat(document.getElementById("txtx2").value);
            var b = parseFloat(document.getElementById("txtx").value);
            var c = parseFloat(document.getElementById("txtnum").value);
            var x1 = 0;
            var x2 = 0;
            var puntosX1 = new Array();
            var puntosX2 = new Array();
            var puntosY = new Array();
            for (; limiteInf <= limiteSup;) {
                x1 = (a * Math.pow(limiteInf, 2)) + (parseFloat(b) * limiteInf) + parseFloat(c);
                //x2 = ((-b) - Math.sqrt((b * b) - (limiteInf * a * c))) / (2.0 * a);
                puntosX1.push(x1);
                puntosX2.push(x2);
                puntosY.push(limiteInf);
                limiteInf += incremento;
            }
            dibujaPuntos(puntosY, puntosX1);
            //dibujaPuntos(puntosX2, puntosY);
            //Si no, lanza un mensaje de alerta.
        } else {
           alert("Especifique la funcion a dibujar e ingrese los campos...");
        }
        //Si no, lanza un mensaje de alerta.
    } else {
        alert("Porfavor Especifique los incrementos en X. El limite superior debe ser mayor al limite inferior...");
    }
}

function dibujaPuntos(puntosX, puntosY) {
    var canvas = document.getElementById("lienzo");
    var ctx = canvas.getContext("2d");
    ctx.lineWidth = 1;
    ctx.strokeStyle = "blue";
    ctx.fillStyle = "black";
    ctx.font = "7px Arial";
    var posicionX = new Array();
    var posicionY = new Array();
    for (var i = 0; i < puntosX.length; i++) {
        //Verifica que los valores no sean mayores a 100 o menores a -100 para no salir del lienzo.
        if (puntosX[i] <= 100 && puntosY[i] <= 100 && puntosX[i] >= -100 && puntosY[i] >= -100) {
            //Verifica en que cuadrante estan los puntos.
            if (isCuadrante(puntosX[i], puntosY[i]) == 1) {
                var x = 300 + ((puntosX[i] * 300) / 100);
                var y = 225 - ((puntosY[i] * 225) / 100);
                posicionX.push(x);
                posicionY.push(y);
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            } else if (isCuadrante(puntosX[i], puntosY[i]) == 2) {
                var x = 300 - (-1 * ((puntosX[i] * 300) / 100));
                var y = 225 - ((puntosY[i] * 225) / 100);
                posicionX.push(x);
                posicionY.push(y);
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            } else if (isCuadrante(puntosX[i], puntosY[i]) == 3) {
                var x = 300 - (-1 * ((puntosX[i] * 300) / 100));
                var y = 225 + (-1 * ((puntosY[i] * 225) / 100));
                posicionX.push(x);
                posicionY.push(y);
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            } else if (isCuadrante(puntosX[i], puntosY[i]) == 4) {
                var x = 300 + ((puntosX[i] * 300) / 100);
                var y = 225 + (-1 * ((puntosY[i] * 225) / 100));                
                posicionX.push(x);
                posicionY.push(y);
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            } else if (puntosX[i] == 0) {
                var x = 300;
                if (puntosY[i] > 0) {
                    var y = 225 - ((puntosY[i] * 225) / 100);
                } else {
                    var y = 225 + (-1 * ((puntosY[i] * 225) / 100));
                }
                posicionX.push(x);
                posicionY.push(y);
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            } else if (puntosY[i] == 0) {
                var y = 225;
                if (puntosX[i] > 0) {
                    var x = 300 + ((puntosX[i] * 300) / 100);
                } else {
                    var x = 300 - (-1 * ((puntosX[i] * 300) / 100));
                }
                posicionX.push(x);
                posicionY.push(y);
                ctx.beginPath();
                ctx.arc(x, y, 3, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            } else {
                aleert("No se encontro el cuadrante del punto");
            }
        }
    }
    var ccc = posicionX.length - 1;
    //alert(ccc);
    if (posicionX.length > 0) {
        for (var i = 0; i < ccc ; i++) {
            //ctx.arc(x, y, 3, 0, 2 * Math.PI);
            //alert("move to:" + posicionX[i] + ", " + posicionY[i]);
            //alert("line to:" + posicionX[i + 1] + "," + posicionY[i + 1]);
            ctx.beginPath();
            ctx.moveTo(posicionX[i], posicionY[i]);
            ctx.lineTo(posicionX[i + 1], posicionY[i + 1]);
            ctx.fillText("(" + posicionX[i] + ", " + posicionY[i] + ")", posicionX[i] + 7, posicionY[i] + 7);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }
        //Dibuja ultimo cudrante...
        ctx.beginPath();
        ctx.fillText("(" + posicionX[posicionX.length - 1] + ", " + posicionY[posicionY.length -1] + ")", posicionX[posicionX.length -1] + 7, posicionY[posicionY.length -1] + 7);
        ctx.closePath();
        ctx.fill();
        ctx.stroke();
        
    }
}

function isCuadrante(x, y) {
    if (x > 0 && y > 0) {
        return 1;
    } else if (x < 0 && y > 0) {
        return 2;
    } else if (x < 0 && y < 0) {
        return 3;
    } else if (x > 0 && y < 0) {
        return 4;
    } else {
        return 0;
    }
}

function setLimiteSup() {
    var lblLimiteSup = document.getElementById("lblValorRangoSup");
    var limiteSup = document.getElementById("rangoSup");
    lblLimiteSup.innerText = "= " + limiteSup.value;
}

function setLimiteInf() {
    var lblLimiteInf = document.getElementById("lblValorRangoInf");
    var limiteInf = document.getElementById("rangoInf");
    lblLimiteInf.innerText = "= " + limiteInf.value;
}

function limpiaCanvas() {
    var canvas = document.getElementById("lienzo");
    var cxt = canvas.getContext("2d");

    cxt.clearRect(0, 0, canvas.width, canvas.height);

    dibujarPlanoCartesiano();
}
